<style>
.toolBar {
  margin-bottom: 10px;
}

.ivu-dropdown {
  margin: 0px;
}

.tCheck {
  padding-left: 10px;
  float: left;
  clear: left;
  z-index: 9999;
}
</style>

<template>
  <Row>
    <Row class="toolBar" justify="space-between">
      <Col span="8">
        <Button-group>
          <Tooltip v-if="add" content="添加" placement="bottom-start">
            <Button type="ghost" @click="addClick()">添加</Button>
          </Tooltip>

          <!--<Tooltip v-if="edit" content="编辑所选" placement="bottom-start">-->
          <!--<Button type="ghost" @click="editCheck()">-->
          <!--编辑所选-->
          <!--</Button>-->
          <!--</Tooltip>-->
          <Tooltip v-if="saveBtn" content="保存" placement="bottom-start">
            <Button type="ghost" @click="saveBtnClicked()">保存</Button>
          </Tooltip>
          <Tooltip v-if="delCheck" content="删除所选" placement="bottom-start">
            <Button type="ghost" @click="delCheckClick()">删除所选</Button>
          </Tooltip>
          <Tooltip v-if="assign" content="分配资源" placement="bottom-start">
            <Button type="ghost" @click="assignClick()">分配资源</Button>
          </Tooltip>
          <Tooltip v-if="reset" content="重置密码" placement="bottom-start">
            <Button type="ghost" @click="resetClick()">重置密码</Button>
          </Tooltip>
          <Tooltip v-if="apply" content="上报" placement="bottom-start">
            <Button type="ghost" @click="applyClick()">上报</Button>
          </Tooltip>
          <Tooltip v-if="director" content="设置检验员" placement="bottom-start">
            <Button type="ghost" @click="directorClick()">设置检验员</Button>
          </Tooltip>
        </Button-group>
      </Col>
      <Col span="16">
        <Button-group style="float: right;">
          <Tooltip content="刷新" placement="bottom-start">
            <Button type="ghost" @click="refresh">刷新</Button>
          </Tooltip>
          <Tooltip content="导出全部数据" placement="bottom-start">
            <Button type="ghost" @click="exportData(1)">导出全部数据</Button>
          </Tooltip>
          <Tooltip content="导出当前页数据" placement="bottom-start">
            <Button type="ghost" @click="exportData(2)">导出当前数据</Button>
          </Tooltip>
        </Button-group>
        <Input
          v-model="searchKey"
          icon="ios-search-strong"
          placeholder="请输入..."
          style="width:200px;float:right;"
        ></Input>
      </Col>
    </Row>
    <Table
      :context="self"
      border
      stripe
      :columns="columns"
      :data="curTableData"
      :loading="loading"
      ref="table"
      @on-selection-change="selectRow"
      @on-select="handelSelect"
      @on-row-dblclick="show"
    ></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page
          :total="total"
          :current="current"
          :pageSize="pageSize"
          :page-size-opts="pageSizeOpts"
          @on-change="changePage"
          @on-page-size-change="changeSize"
          show-elevator
          show-total
          show-sizer
        ></Page>
      </div>
    </div>
    <Modal v-show="dataShow" title="查看数据详细信息" v-model="showData" class="editm">
      <Form ref="showForm" :model="showItem" :label-width="80">
        <Form-item v-for="(val, key)  in showItem" :label="key" :key="key">
          <Input :value="val" disabled :icon="key==='Logo'? val:''"></Input>
        </Form-item>
      </Form>
    </Modal>
  </Row>
</template>

<script>
import api from '@/api'
import { inputString } from '@/common/utils'
export default {
    data () {
        return {
            self: this,
            total: 0,
            current: 1,
            pageSize: this.pageS,
            searchKey: '',
            spinShow: false,
            showData: false,
            showItem: {},
            pageSizeOpts: [10, 20, 50, 100],
            selectRows: [], // 选择的数据
            formatColumns: []
        }
    },
    props: {
        loading: false,
        saveBtn: {
            type: Boolean,
            default () {
                return false
            }
        },
        exportcolumns: {
            type: Array,
            default () {
                return null
            }
        },
        exportfilter: {
            type: Function,
            default (data) {
                if (Array.isArray(data)) {
                    return data.map(v => {
                        return v
                    })
                }
                return data
            }
        },
        pageS: {
            type: Number,
            default () {
                return 10
            }
        },
        dataAll: {
            type: Array,
            default () {
                return []
            }
        },
        columns: {
            type: Array,
            default () {
                return []
            }
        },
        dataShow: {
            type: Boolean,
            default () {
                return false
            }
        },
        add: {
            type: Boolean,
            default () {
                return false
            }
        },
        director: {
            type: Boolean,
            default () {
                return false
            }
        },
        delCheck: {
            type: Boolean,
            default () {
                return false
            }
        },
        assign: {
            type: Boolean,
            default () {
                return false
            }
        },
        reset: {
            type: Boolean,
            default () {
                return false
            }
        },
        check: {
            type: Boolean,
            default () {
                return false
            }
        },
        op: {
            type: Boolean,
            default () {
                return false
            }
        },
        inst: {
            type: Boolean,
            default () {
                return false
            }
        },
        apply: {
            type: Boolean,
            default () {
                return false
            }
        }
    },
    computed: {
        state () {
            return this.$store.state.app
        },
        padd () {
            let ret = false
            if (this.add) {
                let data = this.state.router.currentPageName + '-增加'
        // console.log(data);
                for (var e in this.state.menu) {
                    if (data === this.state.menu[e].Name) {
                        ret = true
                        break
            // return true
                    }
                }
            }
            console.log(ret)
            return ret
        },
    //        过滤数据表
        filiterTableDate () {
            let fdata
            if (!this.dataAll) {
                fdata = []
            } else {
                let e = this.dataAll.slice()
                let keys = this.searchKey
                let filterData = function (element) {
                    if (keys === '') {
                        return true
                    }
                    for (let o in element) {
                        if (String(element[o]).indexOf(keys) >= 0) {
                            return true
                        }
                    }
                    return false
                }
                fdata = e.filter(filterData)
                this.total = fdata.length
                if (this.dataAll.length < 1) {
                    fdata = this.dataAll
                }
            }
            return fdata
        },
    //      当前表数据
        curTableData () {
      // console.log(this.columns)
            if (!this.filiterTableDate) {
                return []
            }
            let from = this.pageSize * (this.current - 1)
            let to = from + this.pageSize
            return this.filiterTableDate.slice(from, to)
        }
    },
  // watch: {},
    methods: {
        saveBtnClicked () {
            this.$emit('save')
        },
    //        刷新数据
        refresh () {
            this.$emit('refresh')
        },
    //        选择数据
        selectRow (selection) {
            this.selectRows = selection
        },
    //      改变页码大小
        changeSize (current) {
            this.pageSize = current
        },
    //      改变页码
        changePage (current) {
      // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
            this.current = current
        },
    //      导出数据1为原始数据，2为当前数据
        exportData (type) {
            if (type === 1) {
                console.log('全部数据')
                this.$refs.table.exportCsv({
                    filename: '全部数据',
                    quoted: true,
                    original: false,
                    columns: this.exportcolumns ? this.exportcolumns : this.columns,
                    data: this.exportfilter ? this.exportfilter(this.filiterTableDate) : this.filiterTableDate
                })
            } else if (type === 2) {
                console.log('当前数据')
                this.$refs.table.exportCsv({
                    filename: '当前数据',
                    original: false,
                    quoted: false,
                    columns: this.exportcolumns ? this.exportcolumns : this.columns,
                    data: this.exportfilter ? this.exportfilter(this.curTableData) : this.curTableData
                })
            }
        },
    //      显示详细记录
        show (row) {
      // this.showItem = row;
      // this.showData = true;
        },
    //      编辑表格数据
        edit (index) {
            console.log(this.curTableData[index])
            this.$emit('edit', this.curTableData[index])
        },
        editCheck () {
            if (this.selectRows.length !== 1) {
                this.$Message.error('生成订单必须选择一个数据进行授权！', 4)
            } else {
                this.$emit('edit', this.selectRows[0])
            }
        },
    //      编辑表格数据
        getflow (index) {
            console.log(this.curTableData[index])
            this.$emit('getflow', this.curTableData[index])
        },
    //      新增
        addClick () {
            this.$emit('add')
        },
    //      授权
        assignClick () {
      // let list = []
      // for (let i = 0; i < this.selectRows.length; i++) {
      //   list.push(this.selectRows[i])
      // }
            this.$emit('assign', this.selectRows)
        },
    //      重置
        resetClick () {
            let list = []
            for (let i = 0; i < this.selectRows.length; i++) {
                list.push(this.selectRows[i].Id)
            }
            this.$emit('reset', list)
        },
    //      上报
        applyClick () {
            let list = []
            for (let i = 0; i < this.selectRows.length; i++) {
                list.push(this.selectRows[i])
            }
            this.$emit('apply', list)
        },
    // 设置部门主管
        directorClick () {
            let list = []
            for (let i = 0; i < this.selectRows.length; i++) {
                list.push(this.selectRows[i])
            }
            this.$emit('director', list)
        },
        setOder () {
            if (this.selectRows.length !== 1) {
                this.$Message.error('生成订单必须选择一个数据进行授权！', 4)
            } else {
                this.$emit('setOder', this.selectRows[0])
            }
        },
    //      删除所选确认
        delCheckClick () {
            if (!this.selectRows || this.selectRows.length < 1) {
                this.$Message.warning('必须选择一个需要删除的项目！')
            } else {
                this.$Modal.confirm({
                    title: '删除确认',
                    content:
            '<p>请确认此数据删除后，不影响其他功能或人员使用。</p>' +
            '<p>是否继续删除？</p>',
                    onOk: () => {
                        this.delList(this.selectRows)
                    },
                    onCancel: () => {}
                })
            }
        },
    //      删除所选
        delList (rows) {
            let list = []
            for (let i = 0; i < rows.length; i++) {
                list.push(rows[i].Id)
            }
            this.$emit('delCheck', list)
        },
    //      删除确认
        remove (index) {
            this.$Modal.confirm({
                title: '删除确认',
                content:
          '<p>请确认此数据删除后，不影响其他功能或人员使用。</p>' +
          '<p>是否继续删除？</p>',
                onOk: () => {
                    this.delete(index)
                },
                onCancel: () => {}
            })
        },
    //      删除
        delete (index) {
            let id = this.curTableData[index].Id
            this.$emit('del', this.curTableData[index])
        },
        handelSelect (selection) {
            this.$emit('handelSelect', selection)
        }
    },
    mounted () {
    // 修改删除操作按钮
        if (this.op) {
            let op = {
                title: '操作',
                key: 'action',
                width: 150,
                align: 'center',
                render: (h, params) => {
                    return h('div', [
                        h(
              'Button',
                            {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.edit(params.index)
                                    }
                                }
                            },
              '修改'
            ),
                        h(
              'Button',
                            {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.index)
                                    }
                                }
                            },
              '删除'
            )
                    ])
                }
            }
      // this.formatColumns = JSON.parse(JSON.stringify(this.columns)).push(op);
            this.columns.push(op)
        } else {
      // this.formatColumns = JSON.parse(JSON.stringify(this.columns));
        }
        if (this.inst) {
            let inst = {
                title: '操作',
                key: 'action',
                width: 150,
                align: 'center',
                render: (h, params) => {
                    return h('div', [
                        h(
              'Button',
                            {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.edit(params.index)
                                    }
                                }
                            },
              '详情'
            ),
                        h(
              'Button',
                            {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.getflow(params.index)
                                    }
                                }
                            },
              '流程'
            )
                    ])
                }
            }
            this.columns.push(inst)
        }
    // 多选框
        if (this.check) {
            let ck = {
                type: 'selection',
                width: 60,
                align: 'center'
            }
            this.columns.unshift(ck)
        }

    //      this.getall()
    }
}
</script>

